<template>
  <!-- 按钮元素，点击时触发toggleLike方法 -->
  <button 
    @click="toggleLike" 
    :class="['btn', liked ? 'btn-pink' : 'btn-outline-primary']"  <!-- 根据liked状态设置按钮的样式类 -->
    @mouseover="hover = true"  <!-- 鼠标悬停时将hover设为true -->
    @mouseleave="hover = false"  <!-- 鼠标离开时将hover设为false -->
    :style="{ backgroundColor: hover && !liked ? 'pink' : liked ? 'pink' : '' }"  <!-- 根据hover和liked状态动态设置按钮的背景颜色 -->
  >
    <!-- 根据liked状态显示不同的文本 -->
    <span v-if="liked">已点赞</span>
    <span v-else>点赞</span>
  </button>
</template>

<script>
import { mapState, mapActions } from 'vuex';  // 从vuex中导入mapState和mapActions

export default {
  name: 'LikeButton',  // 组件名称
  props: {
    foodId: Number,  // 定义组件接收的foodId属性，类型为Number
  },
  data() {
    return {
      hover: false,  // 定义组件的本地状态hover，初始值为false
    };
  },
  computed: {
    ...mapState(['user', 'foods']),  // 从vuex状态中映射user和foods到组件的计算属性中
    liked() {
      const food = this.foods.find(food => food.id === this.foodId);  // 根据foodId找到对应的食物
      return food && food.likedBy && food.likedBy.includes(this.user.username);  // 检查当前用户是否已经点赞该食物
    },
  },
  methods: {
    ...mapActions(['toggleLikeFood']),  // 从vuex中映射toggleLikeFood方法到组件的methods中
    toggleLike() {
      if (!this.user) {  // 如果用户未登录
        alert('请先登录');  // 弹出提示
        this.$router.push('/login');  // 跳转到登录页面
        return;
      }
      this.toggleLikeFood(this.foodId).then(() => {  // 调用vuex的toggleLikeFood方法
        this.$forceUpdate();  // 强制更新组件，确保liked状态刷新
      });
    },
  },
};
</script>

<style scoped>
.btn-pink {
  background-color: pink;  
  border-color: pink;
  color: white;  
}
.btn-outline-primary {
  border-color: #007bff;  
  color: #007bff;
}
.btn-outline-primary:hover {
  background-color: #007bff;  /*鼠标悬停时，背景颜色为蓝色*/
  color: white;  /* 鼠标悬停时，字体颜色为白色*/
}
</style>
